<template>
  <div class="home">
    <header class="header">这是头部</header>
    <header class="header">这是搜索框</header>
    <main class="content">
      <div class="contentmax">
        <div class="contentItem" v-for="(item) in contentList.List" :key="item.id" @click="toDetailArticle(item.id)">
          <img :src="item.user.avatarUrl" alt="">
          <div class="item_right">
            <div style="font-size: .4623rem;">{{ item.title }}</div>
            <div style=" opacity: .5;">{{ item.content }}</div>
          </div>
          <span class="iconfont icon-redu">
            {{ item.likeNum }}
          </span>
        </div>
      </div>
      <div class="addArticle" @click="addArticle"></div>
    </main>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getArticles } from '@/api/index'
const route = useRoute();
const router = useRouter();
const contentList = reactive({
  List: []
})
let addArticle = () => {
  // 如果没有登录先去登录
  if(!localStorage.getItem('token')){
    router.push('/login');
    return ;
  }
  router.push({
    path: '/addarticle',
  })
};
let toDetailArticle = (id) => {
  router.push({ path: '/detailarticle',query:{id}});
};
onMounted(async () => {
  //console.log('3.-组件挂载到页面之后执行-------onMounted')
  let res = await getArticles();
  contentList.List = res.data.data
  console.log(res.data.data);
})
</script>
<style scoped lang='css'>
.home {
  display: flex;
  flex-direction: column;

}

.header {
  background-color: rgb(116, 223, 187);
  line-height: 1.0246rem;
  text-align: center;
  font-size: .4831rem;
  color: #fff;
}

.content {
  position: relative;
  flex: 1;
  overflow: hidden;
  background-color: #f5f5f5;
}

.addArticle {
  width: 1.9662rem;
  height: 1.9662rem;
  background-color: rgb(170, 221, 221);
  border-radius: 50%;
  position: fixed;
  right: .3208rem;
  bottom: 2.0208rem;
}

.addArticle::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  content: '';
  width: 1.17rem;
  height: .0725rem;
  background-color: rgb(248, 243, 243);
}

.addArticle::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  content: '';
  width: 1.17rem;
  height: .0725rem;
  background-color: rgb(248, 243, 243);
}

.contentmax {
  max-height: 100%;
  overflow-y: scroll;
}

.contentItem {

  display: flex;
  padding: .3865rem;
  background-color: #fff;
}

.contentItem img {
  width: 1.4493rem;
  height: 1.4493rem;
}

.item_right {
  margin-left: .2415rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}</style>